<template>
	<view class="flex-row justify-between items-center flex-1 section"
		:style="{border:border,background:background,color:color}">
		<input class="text" :placeholder="placeholder" v-model="inputvalue"></input>
		<image class="image_2" src="/static/common/bgSearch.png" @click="handleSearch" />
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: ""
			},
			border: {
				type: String,
				default: ""
			},
			background: {
				type: String,
				default: ""
			},
			color: {
				type: String,
				default: ""
			},
			text: {
				type: String,
				default: ""
			},

		},
		data() {
			return {
				inputvalue: "",
			}
		},
		watch: {
			text: function(newvalue, oldvalue) {
				this.inputvalue = newvalue
			}
		},
		created() {
			this.inputvalue = this.text
		},
		methods: {
			handleSearch() {
				this.$emit('handleSearch', this.inputvalue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		padding: 6rpx 6rpx 6rpx 36rpx;
		background-color: #f4f4f4;
		border-radius: 38rpx;
		height: 72rpx;

		.text {
			color: #999999;
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.7rpx;
			width: 90%;
		}

		.image_2 {
			border-radius: 50%;
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>